<template>
	<view class="">

		<view class="bond" v-if="data.price">
			<view class="top">
				<view class="money">
					￥{{data.price}}元
				</view>
				<view class="tips">
					温馨提示：支付保证金后，商家可用于平台购买相关商品
				</view>

				<view class="flex_sb mt24 ptb32">
					<view class="f24">
						收款方
					</view>
					<view class="f24">
						好饰商家版平台
					</view>
				</view>
				<view class="flex_sb mt24 ptb32">
					<view class="f24">
						商户订单号
					</view>
					<view class="f24">
						{{data.orderNo}}
					</view>
				</view>
				<view class="flex_sb mt24 ptb32">
					<view class="f24">
						创建时间
					</view>
					<view class="f24">
						{{data.create_time}}
					</view>
				</view>
			</view>

			<view class="header mt24">
				<view class="info">
					选择支付方式
				</view>
				<view class="flex mt24 wxchat">
					<image src="https://img.aibbyp.com/wechat/images/bank/WECHAT.png" mode="" mode="aspectFit"
						class="initImg">
					</image>
					<view class="flex1">
						微信支付
					</view>
					<view class="">
						<radio value="radio" checked="true" />
					</view>
				</view>

			</view>
			<view class="btn" @click="confirm">
				立即支付
			</view>

		</view>
		<u-popup v-model="show" mode='center' :popupBox='false' border-radius="8">
			<view class="popupBox">
				<u-radio-group v-model="value">
					<view class="radioBox mt20 mb12" v-for="(item, index) in list" :key="index">
						<u-radio :name="item.id">
						</u-radio>
						<view class="">
							{{item.name}}
							<text class="error fb ml12">
								￥{{item.price}}
							</text>
						</view>

					</view>
				</u-radio-group>
				<u-button type="primary" class="mt32 btn11" @click="btnSub">
					确定选择
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: true,
				radio: '',
				data: {},
				list: [],
			}
		},
		onLoad() {
			this.getPayment();
			this.getBonds()
			this.getType()
		},
		methods: {
			btnSub() {

				if (this.value == '') {
					uni.showToast({
						title: '请选择保证金方式',
						icon: 'none'
					})
					return
				} else {
					this.getBondPay()
				}
			},
			getBonds() {
				this.$api.get({
					url: '/store.entry/getBonds'
				}).then(res => {
					if (res) {
						this.list = res
					}
				})
			},
			getBondPay() {
				this.$api.get({
					url: '/store.entry/getBondPay?id=' + this.value
				}).then(res => {
					if (res) {
						this.data = res
						this.show = false
					}
				})
			},
			getPayment() {
				console.log('d')
				let method = 'wap';
				// #ifdef APP-PLUS
				method = 'app';
				// #endif
				// #ifdef MP-BAIDU
				method = 'mini';
				// #endif
				// #ifdef MP-WEIXIN
				method = 'miniapp';
				// #endif
				// #ifdef MP-ALIPAY
				method = 'mini';
				// #endif
				// #ifdef MP-QQ
				method = 'mini';
				// #endif
				this.payList = [{
					name: '余额支付',
					describe: '',
					type: 'balance',
					method: 'balance',
					state: this.isbalance ? true : false, // 是否可用
					select: this.isbalance ? true : false // 是否选中
				}];
				// #ifdef H5
				if (this.$jssdk.isWechat()) {
					// 基本完成,后端未测试,没有完善回调，1.0.8 版本暂时屏蔽
					this.payList.push({
						name: '微信支付',
						describe: '推荐使用微信支付',
						type: 'jssdk',
						method: method,
						state: true,
						select: this.isbalance ? false : true
					});
				} else {
					this.payList.push({
						name: '支付宝',
						describe: '',
						type: 'alipay',
						method: method,
						state: true,
						select: false
					}, {
						name: '微信支付',
						describe: '推荐使用微信支付',
						type: 'wechat',
						method: method,
						state: true,
						select: this.isbalance ? false : true
					});
				}
				// #endif
				// #ifndef H5
				uni.getProvider({
					service: "payment",
					success: (e) => {
						// e.provider.push('wxpay')
						e.provider.map((value) => {
							if (value == 'alipay') {
								this.payList.push({
									name: '支付宝',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'wxpay') {
								this.payList.push({
									name: '微信支付',
									describe: '推荐使用微信支付',
									type: 'wechat',
									method: method,
									state: true,
									select: this.isbalance ? false : true
								});
							} else if (value == 'baidu') {
								this.payList.push({
									name: '百度收银台',
									describe: '',
									type: value,
									method: method,
									state: true,
									select: false
								});
							} else if (value == 'appleiap') {
								// this.payList.push({name: 'Apple支付',describe: '',type: 'apple',method: method,state: true,select: false});
							}
						})
					}
				});
				// #endif
				console.log(this.payList)
			},

			//确认支付
			confirm() {
				let data = null;
				if (this.disabled) {
					return;
				}
				this.payList.map((value, index, array) => {
					if (value.select) {
						data = value;
					} else {
						return;
					}
				});

				// 判断支付是否存在
				if (!data) {
					uni.showModal({
						content: "请选择支付方式",
						showCancel: false
					});
					return;
				} else {
					this.disabled = true;
					// 获取小程序code
					// #ifdef MP
					uni.login({
						success: (e) => {
							this.wanlPay(data, e.code);
						},
						fail: (e) => {
							uni.showModal({
								content: "无法获取微信code,原因为: " + e.errMsg,
								showCancel: false
							})
						}
					})
					// #endif
					// #ifndef MP
					this.wanlPay(data);
					// #endif
				}
			},
			async wanlPay(data, code = null) {
				this.$api.post({
					url: '/store.entry/bondPay',
					data: {
						order_type: this.order_type,
						type: data.type,
						method: data.method,
						code: code,
						order_id: this.order_id,
						token: this.token
					},
					success: res => {
						// 余额支付/小程序支付
						if (data.type == 'balance') {
							this.$store.commit('user/setUserInfo', {
								money: this.$wanlshop.bcsub(this.$store.state.user.money, this
									.price)
							});
							this.paySuccess();
						}
						// 微信 H5支付
						if (data.type == 'wechat' && data.method == 'wap') {
							// 1.0.8升级 延迟弹出
							setTimeout(() => {
								uni.showModal({
									content: '请确认微信支付是否已完成',
									confirmText: '已完成',
									cancelText: '重新支付',
									success: response => {
										if (response.confirm) {
											this.paySuccess();
										} else if (response.cancel) {
											this.confirm();
										}
									}
								});
							}, 2000);
							// 异步查询是否支付成功
							window.location.href = res;
						}
						// 支付宝 H5支付
						if (data.type == 'alipay' && data.method == 'wap') {
							this.disabled = false;
							if (this.order_type === 'goods') {
								this.$store.commit('statistics/order', {
									pay: this.$wanlshop.bcsub(this.$store.state.statistics.order
										.pay, this.payNum),
									delive: this.$wanlshop.bcadd(this.$store.state.statistics.order
										.delive, this.payNum)
								});
							}
							document.write(res);
						}
						// 微信小程序支付
						if (data.type == 'wechat' && data.method == 'miniapp') {
							uni.requestPayment({
								appId: res.appId,
								nonceStr: res.nonceStr,
								package: res.package,
								paySign: res.paySign,
								signType: res.signType,
								timeStamp: res.timeStamp,
								success: (e) => {
									this.paySuccess();
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
								}
							})
						}
						// 微信JSSDK支付，返回的是配置
						if (data.type == 'jssdk' && data.method == 'wap') {
							this.$jssdk.wxpay({
								data: res,
								success: res => {
									this.paySuccess();
								},
								fail: err => {
									if (err.errMsg == "chooseWXPay:ok") {
										this.$wanlshop.msg('支付成功');
									} else if (err.errMsg == "chooseWXPay:cancel") {
										this.$wanlshop.msg('支付失败，取消支付');
									} else if (err.errMsg == "chooseWXPay:fail") {
										this.$wanlshop.msg('支付失败');
									}
									this.disabled = false;
									this.payErr()
								}
							})
						}
						// APP支付
						if ((data.type == 'alipay' || data.type == 'wechat') && data.method == 'app') {
							let provider = data.type;
							if (data.type == 'wechat') {
								provider = 'wxpay';
							}
							uni.requestPayment({
								provider: provider,
								orderInfo: res,
								success: (e) => {
									console.log("success", e);
									this.paySuccess();
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false
									})
									this.payErr()
								},
								complete: () => {
									this.disabled = false;
								}
							})
						}
					}
				});
			},
			// 支付成功
			paySuccess() {
				uni.setStorageSync('status', 6)
				uni.showModal({
					title: '支付成功',
					content: '你已成功支付保证金',
					showCancel: false,
					success: res => {
						uni.reLaunch({
							url: '/pages/tabbarcompotant/my/user'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popupBox {
		width: 600rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.radioBox {
			display: flex;
			justify-content: start;
		}

		.btn11 {
			margin-top: 60rpx;
		}

	}

	.bond {
		.ptb32 {
			padding: 0 32rpx;
		}

		.top {
			background: #fff;
			padding-top: 96rpx;
			padding-bottom: 32rpx;

			.money {

				font-weight: 500;
				font-size: 72rpx;
				text-align: center;
				color: #3D3D3D;
			}

			.tips {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 24rpx;
				color: #5480FB;
				padding: 28rpx 20rpx;
				background: #F0F6FF;
				margin-top: 110rpx;
				width: calc(100% - 64rpx);
				margin-left: 32rpx;
			}
		}

		.header {
			background: #fff;
			padding: 32rpx 32rpx;

			.initImg {
				width: 48rpx;
				height: 42rpx;
				margin-right: 24rpx;
			}

			.wxchat {
				align-items: center;
			}
		}

		.btn {
			position: absolute;
			left: 32rpx;
			bottom: 40rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			width: 686rpx;
			height: 92rpx;
			text-align: center;
			line-height: 92rpx;
			background: linear-gradient(160deg, #2D94F3 0%, #3072F8 100%);
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(46, 132, 246, 0.2);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>